<template>
    <!-- 基于自然资源禀赋的港区分类查询 -->
    <div class="flex classify">
        <div class="left flex">
            <div class="box">
                <div class="title">港区太阳能利用适应性参数</div>
                <div class="btn-title">港区土地利用率：</div>
                <div class="btn-box flex">
                    <div class="btn" :class="{ active: btnIndex == 0 }" @click="btnIndex = 0">坡度</div>
                    <div class="btn" :class="{ active: btnIndex == 1 }" @click="btnIndex = 1">坡向</div>
                    <div class="btn" :class="{ active: btnIndex == 2 }" @click="btnIndex = 2">土地利用类型</div>
                </div>
                <div class="btn-title">港区遮荫系数：</div>
                <div class="btn-box flex">
                    <div class="btn" :class="{ active: btnIndex == 3 }" @click="btnIndex = 3">土地类型</div>
                    <div class="btn" :class="{ active: btnIndex == 4 }" @click="btnIndex = 4">归一化植被指数</div>
                </div>
            </div>
            <div class="box">
                <div class="title">港区风能利用适应性参数</div>
                <div class="btn-title">港区土地利用率：</div>
                <div class="btn-box flex">
                    <div class="btn" :class="{ active: btnIndex == 5 }" @click="btnIndex = 5">坡度</div>
                    <div class="btn" :class="{ active: btnIndex == 6 }" @click="btnIndex = 6">土地利用类型</div>
                </div>
                <div class="btn-title">港区风能利用率：</div>
                <div class="btn-box flex">
                    <div class="btn" :class="{ active: btnIndex == 7 }" @click="btnIndex = 7">风能利用系数</div>

                </div>
                <div class="btn-title">港区折减系数：</div>
                <div class="btn-box flex">
                    <div class="btn" :class="{ active: btnIndex == 8 }" @click="btnIndex = 8">叶片污染折减系数</div>
                    <div class="btn" :class="{ active: btnIndex == 9 }" @click="btnIndex = 9">风机老化折减系数</div>
                </div>
            </div>
        </div>
        <div class="right box">
            <div class="img">
                <img :src="imgList[btnIndex]" alt="">
            </div>

            <div class="text" >
                <div v-html="description[btnIndex]"></div>
                <img src="@/assets/classify/table.png" style="width: 100%; margin-top: 10px;" v-show="btnIndex ==5 || btnIndex==6" alt="">
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            btnIndex: 0,
            imgList: [
                require("@/assets/classify/c1.png"),
                require("@/assets/classify/c2.png"),
                require("@/assets/classify/c3.png"),
                require("@/assets/classify/c4.png"),
                require("@/assets/classify/c5.png"),
                require("@/assets/classify/c6.jpg"),
                require("@/assets/classify/c8.jpg"),
                require("@/assets/classify/c7.png"),
                require("@/assets/classify/c9.png"),
                require("@/assets/classify/c10.jpg"),
            ],
            description: [
                "<div><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏电站开发利用受地形地貌的影响较大，评估光伏电站发电潜力需要计算可用开发面积，从坡向、坡度、土地类型三个角度来考虑光伏电站的可利用面积</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">：</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">1、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于港区的坡向而言，中国大部分地区朝南的坡向最为适合建设光伏电站，坡向朝向西南或东南的坡向也较为适宜，这是由于北坡所接受到的水平辐照强度远远小于南坡；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">2、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于建设光伏电站而言，港区的坡度越小越适宜，坡度过大的地区并不适宜</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">搭建光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏发电板，这样会大大增加光伏电站的建设成本，并且较大的坡度也会导致</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏板无法</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">调整到最佳倾角，无法最大利用太阳能资源，所以最大的坡度度数限制为15&deg;；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">3</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">不同的港区土地利用类型其利用系数也不一样，应该在不影响森林覆盖率的情况下尽量开发太阳能资源。根据目前常用多晶硅电池的参数，通过PVsyst软件模拟计算得到中国大部分地区光伏组件最佳倾角为35&deg;，此时光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">组件之间的距离为2.51m，从而得到光伏组件的有效面积系数为0.39。</span></p></div>",
                "<div><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏电站开发利用受地形地貌的影响较大，评估光伏电站发电潜力需要计算可用开发面积，从坡向、坡度、土地类型三个角度来考虑光伏电站的可利用面积</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">：</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">1、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于港区的坡向而言，中国大部分地区朝南的坡向最为适合建设光伏电站，坡向朝向西南或东南的坡向也较为适宜，这是由于北坡所接受到的水平辐照强度远远小于南坡；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">2、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于建设光伏电站而言，港区的坡度越小越适宜，坡度过大的地区并不适宜</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">搭建光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏发电板，这样会大大增加光伏电站的建设成本，并且较大的坡度也会导致</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏板无法</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">调整到最佳倾角，无法最大利用太阳能资源，所以最大的坡度度数限制为15&deg;；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">3</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">不同的港区土地利用类型其利用系数也不一样，应该在不影响森林覆盖率的情况下尽量开发太阳能资源。根据目前常用多晶硅电池的参数，通过PVsyst软件模拟计算得到中国大部分地区光伏组件最佳倾角为35&deg;，此时光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">组件之间的距离为2.51m，从而得到光伏组件的有效面积系数为0.39。</span></p></div>",
                "<div><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏电站开发利用受地形地貌的影响较大，评估光伏电站发电潜力需要计算可用开发面积，从坡向、坡度、土地类型三个角度来考虑光伏电站的可利用面积</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">：</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">1、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于港区的坡向而言，中国大部分地区朝南的坡向最为适合建设光伏电站，坡向朝向西南或东南的坡向也较为适宜，这是由于北坡所接受到的水平辐照强度远远小于南坡；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">2、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">对于建设光伏电站而言，港区的坡度越小越适宜，坡度过大的地区并不适宜</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">搭建光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏发电板，这样会大大增加光伏电站的建设成本，并且较大的坡度也会导致</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">光伏板无法</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">调整到最佳倾角，无法最大利用太阳能资源，所以最大的坡度度数限制为15&deg;；</span></p><p style=\"text-indent:40.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">3</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">不同的港区土地利用类型其利用系数也不一样，应该在不影响森林覆盖率的情况下尽量开发太阳能资源。根据目前常用多晶硅电池的参数，通过PVsyst软件模拟计算得到中国大部分地区光伏组件最佳倾角为35&deg;，此时光</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">伏</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">组件之间的距离为2.51m，从而得到光伏组件的有效面积系数为0.39。</span></p></div>",
                "<div><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">遮荫条件主要考虑港区周围的土地类型、归一化植被指数，两者按0.5:0.5的比例进行叠加得到：</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">1、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">不同的港区土地类型对于遮荫而言其遮荫效果也不一样，城市的建筑物高遮荫会较大</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">，</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">建设用地一般建筑物都不会很高，遮荫也会变小。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">2、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的归一化植被指数即NDVI是指近红外波段与可见光红光波段的亮度值之差与之和的比值，归一化植被指数可以反映该地区的植被覆盖率。植被指数较大的区域也不适宜建设光伏电站。</span></p></div>",
                "<div><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">遮荫条件主要考虑港区周围的土地类型、归一化植被指数，两者按0.5:0.5的比例进行叠加得到：</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">1、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">不同的港区土地类型对于遮荫而言其遮荫效果也不一样，城市的建筑物高遮荫会较大</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">，</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">建设用地一般建筑物都不会很高，遮荫也会变小。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">2、</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的归一化植被指数即NDVI是指近红外波段与可见光红光波段的亮度值之差与之和的比值，归一化植被指数可以反映该地区的植被覆盖率。植被指数较大的区域也不适宜建设光伏电站。</span></p></div>",
                "<div><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的土地利用系数取值:土地利用系数的取值主要在0.93~0.97。土地利用的影响因素主要是坡度和土地利用类型。土地利用主要分为六个类型，分别为森林生态系统、水体与湿地生态系统、荒漠生态系统、农田生态系统、聚落生态系统以及草地生态系统。根据风电场选址建议，其选址适宜度为森林生态系统最小，草地生态系统最大，按上述顺序依次递增。港区的坡度为0~3°为坡度一类，3~5°为坡度二类，5~7°为坡度三类，>7°为坡度四类。表1为土地利用系数参考取值表。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">",
                "<div><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的土地利用系数取值:土地利用系数的取值主要在0.93~0.97。土地利用的影响因素主要是坡度和土地利用类型。土地利用主要分为六个类型，分别为森林生态系统、水体与湿地生态系统、荒漠生态系统、农田生态系统、聚落生态系统以及草地生态系统。根据风电场选址建议，其选址适宜度为森林生态系统最小，草地生态系统最大，按上述顺序依次递增。港区的坡度为0~3°为坡度一类，3~5°为坡度二类，5~7°为坡度三类，>7°为坡度四类。表1为土地利用系数参考取值表。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">",
                "<span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的风能利用系数取值风能的利用主要是考虑气候的影响，考虑全国范围内气候影响的风能利用系数为0.91~0.98。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"></span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\">",
                "<p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的叶片污染系数:叶片污染系数的取值范围主要为0.93~0.96。沿海港区的盐分对风机叶片污染影响大，内陆港区盐分对叶片污染影响较小。多雾区对风机污染较少雾区影响小。在海拔高处，即山地地区，紫外线对风机叶片的污染不可忽视。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的风机</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">老化折减分类</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">:风机</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">老化折减系数</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">主要在0.94~0.99，随风机使用年限的增加，</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">折减系数</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">变小。</span></p></div>",
                "<p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的叶片污染系数:叶片污染系数的取值范围主要为0.93~0.96。沿海港区的盐分对风机叶片污染影响大，内陆港区盐分对叶片污染影响较小。多雾区对风机污染较少雾区影响小。在海拔高处，即山地地区，紫外线对风机叶片的污染不可忽视。</span></p><p style=\"text-indent:21.0pt;white-space:pre-wrap;\"><span style=\"font-size:13.0pt;white-space:pre-wrap;\"></span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">港区的风机</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">老化折减分类</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">:风机</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">老化折减系数</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">主要在0.94~0.99，随风机使用年限的增加，</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">折减系数</span><span style=\"font-size:13.0pt;white-space:pre-wrap;\">变小。</span></p></div>",
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.classify {
    box-sizing: border-box;
    overflow: auto;
    background-color: #000C38;
    height: 90.7vh;
    padding: 27px;

}

.box {
    background: #172C69;
    border-radius: 5px 5px 5px 5px;
    padding: 24px 35px;
    padding-bottom: 0;
}

.left {
    flex: 741;
    margin-right: 0;
    flex-direction: column;
    justify-content: space-between;

    .title {
        font-size: 30px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #E9EBF1;
        margin: 0 0 23px 0;
    }

    .btn-title {
        font-size: 25px;
        color: #E9EBF1;
        margin: 0 0 12px 0;
        line-height: 31px
    }

    .btn-box {
        margin: 0 0 20px 0;

        .btn {
            border-radius: 11px 11px 11px 11px;
            margin: 0 18px 0 0;
            padding: 12px 0;
            width: 233px;
            font-size: 22px;
            color: #E9EBF1;
            text-align: center;
            border: 3px solid #2D57D2;
            cursor: pointer;

            &:last-of-type {
                margin: 0;
            }
        }

        .active {
            background-color: #2D57D2;
        }
    }
}

.right {
    flex: 1099;
    margin-left: 27px;
    box-sizing: content-box;
    overflow-y: auto;

    .img {
        padding-bottom: 27px;
        border-bottom: 1px solid #2D57D2;

        img {
            width: 100%;
            height: 540px;
        }
    }

    .text {
        margin: 27px 0 0 0;
        min-height: 120px;
        padding: 0 0 20px 0;
        overflow: auto;
    }
}

::-webkit-scrollbar {
    color: #E9EBF1;
}
</style>
  